<template>
    <div class="page-title">吧台日报查询</div>
    <el-form class="search-form" inline :model="searchForm">
        <div>
           
            <el-form-item class="search-form-item" label="时间:">
                <el-date-picker v-model="searchForm.operDate" type="datetimerange" start-placeholder="开始时间"
                    end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" clearable />
            </el-form-item>
            <el-form-item label="商品名称:">
              <el-input
                v-model="searchForm.goodsName"
                placeholder="请输入商品名称"
                clearable
              />
            </el-form-item>
            <el-form-item label="分类:">
              <el-select v-model="searchForm.goodsType" filterable clearable>
                <el-option
                  v-for="item in GoodsTypeList"
                  :key="item.code"
                  :value="item.code"
                  :label="item.name"
                />
              </el-select>
            </el-form-item>

            <el-form-item class="action-btn-box">
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button class="reset-btn" @click="handleReset">清空筛选</el-button>
                <el-button type="primary" @click="doExport">导出Excel</el-button>
            </el-form-item>
        </div>
    </el-form>
    <div class="table-box">
        <el-table :data="tableData" stripe v-loading="loading">
            <el-table-column prop="goodsName" label="品名" min-width="12%"  align="center"/>
            <el-table-column prop="goodsType" label="品类" min-width="8%"  align="center"/>
            <el-table-column prop="startInventory" label="期初" min-width="7%"  align="center"/>
            <el-table-column prop="barInventory" label="吧台入库" min-width="7%"  align="center"/>
            <el-table-column prop="todayPickUp" label="今日拾遗" min-width="7%" align="center"></el-table-column>
            <el-table-column prop="saleCount" label="售卖" min-width="7%"  align="center"/>
            <el-table-column prop="changeCount" label="置换" min-width="7%"  align="center"/>
            <el-table-column prop="saleInventory" label="销售库存" min-width="7%"  align="center"/>
            <el-table-column prop="inStorageCount" label="寄存" min-width="7%"  align="center"/>
            <el-table-column prop="outStorageCount" label="取出" min-width="7%"  align="center"/>
            <el-table-column prop="todayInventory" label="本日实盘" min-width="7%"  align="center"/>
            <el-table-column prop="totalInventory" label="总库存" min-width="7%"  align="center"/>
            <el-table-column prop="inventoryDif" label="盘点差异" min-width="7%"  align="center"/>
            <el-table-column prop="remark" label="备注" min-width="18%"  align="center"/>
           
        </el-table>
    </div>
    <!-- <div class="pagination-box">
        <el-pagination background layout="prev, pager, next,sizes, jumper, total" :total="total" :current-page="currentPage"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top:10px" />
    </div> -->

    <div class="orderRecords-container-footer">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="currentPage" :page-size="pageSize" layout="total, prev, pager, next,sizes, jumper"
            :total="total">
        </el-pagination>
        <button class="footer-button">确定</button>
    </div>

</template>
  
<script setup>
import ls from '@/lib/ls'
import Api from '@/api'
import { transformWorkTime } from '@/utils/chenhao.js' 
import useConfigStore from '@/store/config'  
const configStore = useConfigStore()
const orgStartTime = configStore.shopInfo.orgReportStartTime //orgStartTime
const orgEndTime = configStore.shopInfo.orgReportEndTime //orgEndTime  





let loading = ref(false)
let searchForm = ref({})
// 搜索
const handleSearch = (params) => {
    currentPage.value = 1;
    getTableData();
}
// 重置
const handleReset = (params) => {
    searchForm.value = {}
    // handleSearch()
}
const doExport = ()=>{
    const baseURL = import.meta.env.MODE == 'development' ? '/api/' : import.meta.env.VITE_BASE_API
    const USER_INFO = ls.get('USER_INFO')
      
    let query = {
        ...searchForm.value,
        orgName:'',
        pageSize:0,
        pageIndex:0,
        goodsName:'',
        goodsType:'',
        orgCode:USER_INFO ? USER_INFO.orgCode : ''
    }
    if (query.operDate && query.operDate.length > 1) {
        query.startTime = query.operDate[0]
        query.endTime = query.operDate[1]
    }
    
    function downloadExcel(url, params) {
    // 使用 fetch 发起 POST 请求
        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=utf-8' // 根据需要调整
            },
            body: JSON.stringify(params) // 将参数转换为 JSON 字符串
        })
        .then(response => {
            // 检查响应是否成功
            if (!response.ok) {
                throw new Error('网络响应不正常');
            }
            return response.blob(); // 将响应转换为 Blob
        })
        .then(blob => {
            // 检查 Blob 是否以 'PK' 开头
            const reader = new FileReader();
            reader.onload = function(event) {
                const arr = new Uint8Array(event.target.result);
                const header = arr.slice(0, 2);
                if (header[0] === 0x50 && header[1] === 0x4B) { // 0x50 0x4B 是 'PK'
                    // 创建下载链接
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    a.download = 'downloadedFile.xlsx'; // 设置下载文件名
                    document.body.appendChild(a);
                    a.click(); // 自动点击下载
                    URL.revokeObjectURL(url); // 释放 URL 对象
                    a.remove(); // 移除链接
                } else {
                    console.error('返回的数据不是有效的 Excel 文件');
                }
            };
            reader.readAsArrayBuffer(blob); // 读取 Blob 数据为 ArrayBuffer
        })
        .catch(error => {
            console.error('请求失败:', error);
        });
    }

    // 调用
    const url = baseURL + 'BarTodayExport/bartodayexport';
    
    downloadExcel(url, query);
}
// 查询表格数据
let tableData = ref([{}])
let currentPage = ref(1)
let pageSize = ref(10)
let total = ref(0)
const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
}
const handleCurrentChange = (val) => {
    currentPage.value = val
    getTableData()
}
const getTableData = (user) => {
    let query = {
        ...searchForm.value,
        pageIndex: currentPage.value,
        pageSize: pageSize.value
    }
    if (query.operDate && query.operDate.length > 1) {
        query.startTime = query.operDate[0]
        query.endTime = query.operDate[1]
    }
    console.log('查询前的query :>> ', query,);
    loading.value = true
    // return
    Api.Common.PcObjProcess.Do({ "functionName": "GetBarTodayReport", "contentData": query }).then(res => {
        console.log('查询订单table res :>> ', res,);
        loading.value = false
        tableData.value = res.data
        total.value = res.totalCount
    })
}

onMounted(() => {
   searchForm.value.operDate = transformWorkTime('今天', orgStartTime, orgEndTime) // 默认今天
   getTableData()
}) 

//获取分类列表
const GoodsTypeList = ref("");
const GetGoodsTypeOrg = () => {
  Api.Common.PcObjProcess.Do({
    functionName: "GetGoodsType",
    orgCode: "0004",
    contentData: "",
  }).then((res) => {
    GoodsTypeList.value = res.result;
  });
};
GetGoodsTypeOrg()

</script>
  
<style scoped lang="scss">
@import '@/styles/com_style_input.css';
/* 在这里编写组件的CSS样式 */
// .app-container {}
::v-deep{
    .el-form-item{
        margin-right: 15px !important;
    }
}
.search-form {
    width: 1520px;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 20px 10px 0 40px;
    margin-bottom: 20px;

    // display: flex;
    .search-form-item {
        ::v-deep {
            .el-form-item__label {
                line-height: 48px;
            }

            .el-date-editor {
                width: 350px;

            }

            .el-input {
                width: 160px;
            }

            .el-input__wrapper {
                height: 40px;
                background: #FAFAFA;
                border-radius: 8px;
            }

            .el-select__wrapper {
                width: 180px;
                height: 40px;
                background: #FAFAFA;
                border-radius: 8px;
            }
        }
    }

    .range-item {
        .el-input {
            width: 130px;
        }
    }

    .action-btn-box {
        float: right;

        button {
            width: 120px;
            height: 50px;
            line-height: 50px;
            background: #FFE566;
            border-radius: 8px;
            border: 0;
            font-size: 16px;
            color: #212121;
        }

        .reset-btn {
            background: #E6E6E6;
            color: #666666;
        }
    }
}

.table-box {
    padding: 20px 40px;
    background: #FFFFFF;
    border-radius: 8px;
    width: 1520px;
    min-height: 550px;
    .total-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 20px;
        color: #212121;
    }
    .el-table--fit {
         height: 400px;
    }

    ::v-deep {
        .el-table__inner-wrapper::before {
            height: 0px;
        }

        .el-table th {
            font-size: 13px;
            font-weight: 700;
        }

        .el-table .el-table__header th,
        .el-table .el-table__header tr,
        .el-table .el-table__header td {
            height: 48px;
            background: #F9F9F9;
        }
    }

    .action-btn {
        width: 66px;
        height: 28px;
        border-radius: 4px;
        border: 1px solid #FF6A00;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #FF6A00;
    }
}

.pagination-box {
    margin-top: 20px;

    ::v-deep {
        .number {
            background: #E6E6E6 !important;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #666666;
        }

        .number:hover {
            color: #FF6A00;
        }

        .is-active {
            background-color: #FF6A00 !important;
            border-radius: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #FFFFFF;
        }

    }
}

.color-FF6A00 {
    color: #FF6A00;
}

.page-title {
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 24px;
    color: #212121;
    margin-bottom: 10px;
}
::v-deep .el-table .cell {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 0.07292rem;
    color: #666666;
    line-height: 0.07292rem;
}
::v-deep .el-form-item__label{
    line-height: 48px;
}
::v-deep .el-select__wrapper{
    width: 200px;
}
</style>
  